<script setup>
import {markRaw, ref} from 'vue'
import {deleteTableRow} from "../../../../utils/utils.js";
import ConfigMap from "./envFromType/ConfigMap.vue";
import Secret from "./envFromType/Secret.vue";
import HostPath from "../volume/HostPath.vue";
import NFS from "../volume/NFS.vue";
import EmptyDir from "../volume/EmptyDir.vue";
import PersistentVolumeClaim from "../volume/PersistentVolumeClaim.vue";

const props = defineProps({
  env: {
    type: Array,
    default: [],
  },
  envFrom: {
    type: Array,
    default: [],
  }
})
const showAddEnvFromDialog = ref(false)
const envFromResourceType = ref('ConfigMap')
const activeName = ref('env')
const envFromResourceTypeComp = {
  'ConfigMap': markRaw(ConfigMap),
  'Secret': markRaw(Secret),
}

const addEnv=()=>{
  const env= {
    name: '',
    value: '',
  }

  props.env.unshift(env)
  console.log("props.env",props.env)
}


const addEnvFrom=()=>{
  showAddEnvFromDialog.value = true
}


</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="逐个配置" name="env">
      <el-table border :data="props.env"  >
        <el-table-column align="center" prop="name" label="变量名称" width="280px">
          <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0">
              <el-input v-model.trim="scope.row.name" placeholder="变量名称"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="value" label="变量值">
          <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0">
              <el-input v-model.trim="scope.row.value" placeholder="变量值" />
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="添加" width="140px">
          <template #header>
            <el-button link type="primary" @click="addEnv()">
              添加
            </el-button>
          </template>
          <template #default="scope">
            <el-button link type="warning" @click="deleteTableRow(props.env,scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="批量生成" name="envFrom">
      <el-table border :data="props.envFrom"  >
        <el-table-column align="center" prop="prefix" title="变量前缀可以给每一个生成的变量增加一个前缀"  label="变量前缀" width="280px">
          <template #default="scope">
            <el-form-item label-width="0" style="margin-bottom: 0">
              <el-input v-model.trim="scope.row.prefix" placeholder="变量前缀"/>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="类型" width="140px">
          <template #default="scope">
            <span>{{scope.row.configMapRef?'ConfigMap':'Secret'}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="config" label="变量配置">
          <template #default="scope">
            <component
                :is="envFromResourceTypeComp[scope.row.configMapRef?'ConfigMap':'Secret']"
                :env-from="props.envFrom"
                :env-from-item="scope.row"
                method="Update"
                :key="Math.random()"
            ></component>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="添加" width="140px">
          <template #header>
            <el-button link type="primary" @click="addEnvFrom()">
              添加
            </el-button>
          </template>
          <template #default="scope">
            <el-button link type="warning" @click="deleteTableRow(props.envFrom,scope.$index)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="showAddEnvFromDialog" :title="('使用'+envFromResourceType+'生成变量')" center >
        <el-card>
          <template #header>
            <div class="card-header">
              <div>
                <el-radio-group v-model="envFromResourceType" class="ml-4">
                  <el-radio value="ConfigMap" size="large">ConfigMap</el-radio>
                  <el-radio value="Secret" size="large">Secret</el-radio>
                </el-radio-group>
              </div>
            </div>
          </template>
          <component
              :is="envFromResourceTypeComp[envFromResourceType]"
              :env-from="props.envFrom"
              @closeEnvDialog="()=>{showAddEnvFromDialog = false}"
          ></component>
        </el-card>
      </el-dialog>
    </el-tab-pane>
  </el-tabs>
</template>

<style scoped>

</style>